<template>
	<view class="u-p-r-20 u-p-l-20 u-p-t-30">
		<u-navbar>
			<view style="display: flex;justify-content: center;align-items: center; padding-left: 30rpx;">
				<!-- <view class="u-p-20" @click="location">
					{{ vuex_city == '' ? '选择' : vuex_city }}
					<u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon>
				</view> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="navtitle">
					日常清洁
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false"
					:clearabled="true" :disabled="true" style="width: 580rpx;" @click="search"></u-search> -->
				<!-- #endif -->
			</view>
		</u-navbar>
		<u-subsection :list="list" :current="curNow" @change="sectionChange" height="80" activeColor="#6d77f4"
			inactiveColor="#babbbd"></u-subsection>
		<view v-if=!lording>
			<view v-for="(item, i) in serList" @click="goDetail(item.id)">
				<myItem :item="item"></myItem>
			</view>
		</view>
		<view v-else>
			加载中
		</view>
	</view>
</template>

<script>
import myItem from '@/components/myItem.vue'
export default {
	components: {
		myItem
	},
	data() {
		return {
			lording:false,
			list: ['最热', '最新'],
			curNow: 0,
			serList: []
		};
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData() {
			this.serList = [
				{
					id:1
				}, {
					id:2
				}, {
					id:3
				}
			]
		},
		goDetail(id){
			this.$u.route({
				url: 'pages/housekeeperOrder/detail'
			})
		},
		async sectionChange(index) {
			//this.lording = true
			//获取数据
			await this.getData()
			this.curNow = index;
			// setTimeout(function(){
			// 	this.lording = false
			// 	console.log('dd',this.lording)
			// },1000)
		}
	}
}
</script>

<style lang="scss" scoped>
.i {
	color: #babbbd
}

.navtitle {
	font-size: 40rpx;
}
</style>
